<template>
  <div class="chat-input-container">
    <!-- 常规聊天输入 -->
    <div class="input-area">
      <div class="textarea-wrapper">
        <el-input v-model="message" type="textarea" :autosize="{ minRows: 2, maxRows: 6 }"
          :placeholder="props.placeholder" @keydown.enter.prevent="handleEnterKey" />
        <div class="input-actions">
          <el-button v-if="isGenerating" @click="stopGenerating" type="danger" size="default">
            停止生成
          </el-button>
          <el-button v-else @click="sendMessage" type="primary" size="default" :disabled="!canSend">
            发送({{ appDetail.cost }}积分)
          </el-button>
        </div>
      </div>
    </div>

    <div class="input-help">
      <span>按Enter键发送，Shift+Enter换行</span>
    </div>
  </div>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { useChatStore } from '~/stores/chat'
  import { useAppStore } from "~/stores/app";
  let app = useAppStore();
  let { refreshBalance, } = app;
  let { totalBalance } = toRefs(app)

  const chatStore = useChatStore()

  const props = defineProps({
    placeholder: {
      type: String,
      default: '输入消息...'
    },
    apiHeaders: {
      type: Object,
      default: () => ({})
    },
    appDetail: {
      type: Object,
      default: () => ({
        cost: 1,
        appConfig: "{}",
        welcomeTip: "",
        poster: ""
      })
    }
  })

  const message = ref("")
  const isGenerating = computed(() => chatStore.isGenerating)
  const canSend = computed(() => message.value.trim().length > 0 && !isGenerating.value)

  // 发送普通消息
  const sendMessage = async () => {
    if (!canSend.value) return
    // 判断 totalBalance  如果余额不足 无法发送消息
    if (totalBalance.value < props.appDetail.cost) {
      ElMessage.error("余额不足，请开通会员")
      return
    }

    const text = message.value.trim()
    message.value = ""

    // 获取当前会话的inputs数据
    let inputs = {}
    const currentConversationId = chatStore.activeConversationId
    if (currentConversationId && chatStore.conversations[currentConversationId]?.inputs) {
      inputs = chatStore.conversations[currentConversationId].inputs
    }

    // 使用chat store发送消息，并传递会话的inputs数据
    await chatStore.sendMessage({
      text,
      inputs
    }, props.apiHeaders)
    refreshBalance()
  }

  // 停止生成
  const stopGenerating = () => {
    chatStore.stopGenerating()
  }

  // 处理回车键
  const handleEnterKey = (e) => {
    // 如果按了Shift+Enter，允许换行
    if (e.shiftKey) {
      return
    }

    // 普通Enter键发送消息
    sendMessage()
  }
</script>

<style lang="scss" scoped>
  .chat-input-container {
    width: 100%;
    background-color: #fff;
    padding: 12px 16px;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  }

  /* 常规聊天输入样式 */
  .input-area {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .textarea-wrapper {
      position: relative;
    }

    :deep(.el-textarea__inner) {
      background-color: #f7f7f7;
      border-radius: 8px;
      padding: 12px;
      padding-bottom: 50px;
      /* 为按钮留出空间 */
      min-height: 80px;
      resize: none;
      line-height: 1.5;
      font-size: 14px;
      border: 1px solid #e0e0e0;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

      &:focus {
        border-color: #1890ff;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
      }
    }
  }

  .input-actions {
    position: absolute;
    bottom: 8px;
    right: 10px;

    .el-button {
      border-radius: 4px;
    }
  }

  .input-help {
    color: #999;
    font-size: 12px;
    margin-top: 6px;
    text-align: right;
  }
</style>